<template>
    <div class="padding-page ps-a workers">
        <!-- 班组合同 -->
        <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待签订合同" name="signed">
            </el-tab-pane>
            <el-tab-pane label="已签订合同" name="completed">
            </el-tab-pane>
        </el-tabs>

        <div class="content">
            <component :is="activeName" /> 
        </div>
    </div>
</template>

<script>
    import signed from './page/signed'
    import completed from './page/completed'
    export default {
        name: 'workers',
        components: { signed, completed },
        data() {
            return {
                // currentRole: 'signed',
                activeName: 'signed',
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event)
                sessionStorage.setItem("currentRole", tab.name)
                console.log(this.$route)
                if(this.$route.name != 'workers') {
                    this.$router.push({ path: '/workers' })
                }
            }
        },
        watch: {
        },
        created() {
            if(sessionStorage.getItem('currentRole')) {
                this.activeName = sessionStorage.getItem('currentRole');
            } else {
                this.activeName = 'signed'
                sessionStorage.setItem("currentRole", 'signed');
            }
        },
    }
</script>

<style lang="scss" scoped>
    .content {
        position: relative;
        height: calc(100% - 60px);
    }
</style>